<template>
    <van-popup v-model:show="showPopup" position="bottom" closeable @close="emit('closed')" class="bg-fog-10 rounded-t-16px"
        :style="{ height: '60%' }">
        <div class="text-16px white text-center w='[100%]' lh-50px ">Game description</div>
        <div class=" pl-15px pr-15px des-list white overflow-y: scroll;">
            <div class="pb-5px  text-14px mb-10px font-bold">Size odd and even</div>
            <div class="size-item white text-14px">
                <div class="mb-10px">Odds:1.95</div>
                <div class="mb-10px"><span>sum-</span><span class="red">Large/Small/Odd/Even</span></div>
                <div class="mb-10px">Large: 11～17; Small: 4～10; Note: If the lottery number is three of the same number, the bet size is odd and even lose.</div>
            </div>
        </div>
    </van-popup>
</template>
  
<script setup lang="ts">

const emit = defineEmits(['closed'])
const props = defineProps<{
    show: boolean
}>()

let showPopup = ref<boolean>(false);

watch(props, (newProps) => {
    showPopup.value = newProps.show;
});
</script>
  
<style lang="less" scoped>
.white {
    color: #fff;
}
.red {
    color: red;
}

.des-list {
    width: 100%;
    height: 87%;
}
</style>
  